<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 500px;
        }
        @media screen and (max-width:539px){
            body {
                background-color: blue;
            }
        }
        /* @media screen and (min-width:540px) and (max-width:969px) { */
        /* 这样写和上面是一样的效果 */
        @media screen and (min-width:540px){
            body {
                background-color: green;
            }
        }
        @media screen and (min-width:970px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <!-- 
        案例∶实现思路

            按照从大到小的或者从小到大的思路

            注意我们有最大值max-width和接小值min-width都是包含等于的

            当屏幕小于540像素，背景颜色变为蓝色（x<= 539 )

            当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540=<x<= 969)

            当屏幕大于等于970像素的时候，背景颜色为红色（ x >= 970 )


        注意∶为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写但是我们最喜欢的还是从小到大来写，这样代码更简洁
     -->
</body>
</html>